```html
<script setup>
  import * as colorPicker from "@zag-js/color-picker"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"

  const service = useMachine(colorPicker.machine, {
    id: "1",
    defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
  })

  const api = computed(() => colorPicker.connect(service, normalizeProps))
</script>

<template>
  <div v-bind="api.getRootProps()">
    // ...
    <div v-bind="api.getPositionerProps()">
      <div v-bind="api.getContentProps()">
        <button v-bind="api.getEyeDropperTriggerProps()">
          <EyeDropIcon />
        </button>
      </div>
    </div>
  </div>
</template>
```
